<template>
<el-main>
<el-row>
  <el-col :lg="4" :xs="24">
    <my-avatar></my-avatar>
    <div class="box-center">
      <div class="user-name text-center">{{ userInfo.user.nickname }}</div>
      <div class="user-other text-center" style="color:#777;">
        {{ userInfo.user.birthdate | getDateTime(false) }}
        <el-divider direction="vertical"></el-divider>
        <i v-if="userInfo.user.sex==1" class="el-icon-male"></i>
        <i v-if="userInfo.user.sex==0" class="el-icon-female"></i>
        <span v-if="userInfo.user.sex!=0 && userInfo.user.sex!=1">保密</span>
      </div>
    </div>
    <el-row style="text-align: center;margin-top:35px;">
      <el-button type="primary" size="small" @click="editUser(userInfo.user)">修改信息</el-button>
    </el-row>
  </el-col>
  <el-col :lg="20" :xs="24">
    <div class="user-bio">
      <el-row>
        <el-col :md="7" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-postcard" /><span>基本信息</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item">
                <i class="el-icon-s-flag" />{{nidLabel}}
                <span>{{userInfo.user.nid}}</span>
              </el-row>
              <el-row class="user-bio-section-item">
                <i class="el-icon-user-solid" />姓名：<span>{{userInfo.user.username}}</span>
              </el-row>
              <el-row class="user-bio-section-item">
                <i class="el-icon-location" />{{deptLabel}}<span>{{userInfo.deptName}}</span>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :md="{span:7,offset:1}" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-s-marketing" /><span>个人健康</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item">
                <i class="el-icon-caret-right" />身高：<span>{{userHeight}}</span>
              </el-row>
              <el-row class="user-bio-section-item">
                <i class="el-icon-caret-right" />体重：<span>{{userWeight}}</span>
              </el-row>
              <el-row class="user-bio-section-item">
                <i class="el-icon-caret-right" />BMI：<span>{{userBMI}}</span>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :md="{span:7,offset:1}" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-s-promotion" /><span>联系方式</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item">
                <i class="el-icon-mobile-phone" />电话号码：<span>{{userInfo.user.phone}}</span>
              </el-row>
              <el-row class="user-bio-section-item">
                <i class="el-icon-eleme" />电子邮箱：<span>{{userInfo.user.email}}</span>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row >
        <el-col :md="23" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-reading" /><span>个人简介</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item">
                <div class="text-muted">{{userInfo.user.remark}}</div>
                <div v-if="userInfo.user.remark==null" class="text-muted">这个人有点懒，还没想好怎样介绍自己。</div>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="11" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-s-help" /><span>角色身份</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item" >
                <el-tag
                    v-for="(item,index) in this.userInfo.roleName"
                    :key="index"
                    :type="index | chooseTagsColor"
                    effect="plain"
                    style="margin:5px 4px;"
                >{{item}}</el-tag>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :md="{span:11,offset:1}" :xs="24">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><i class="el-icon-basketball" /><span>兴趣爱好</span></div>
            <div class="user-bio-section-body">
              <el-row class="user-bio-section-item" >
                <div v-if="this.userInfo.hobbiyName!=null">
                  <el-tag
                      v-for="(item,index) in this.userInfo.hobbiyName"
                      :key="index"
                      :type="index | chooseTagsColor"
                      effect="dark"
                      style="margin:5px 4px;"
                  >{{item}}</el-tag>
                </div>
                <div v-if="this.userInfo.hobbiyName.length==0" class="text-muted">正为寻找属于自己兴趣爱好而努力！</div>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 编辑弹框 -->
    <my-dialog
      :title="userDialog.title"
      :width="userDialog.width"
      :height="userDialog.height"
      :visible="userDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content" style="margin: 0 10px">
        <el-form
          :model="userFormData"
          ref="userFormRef"
          :rules="rules"
          label-width="82px"
          size="small"
        >

          <el-form-item prop="nickname" size="small" label="用户昵称">
            <el-input clearable v-model="userFormData.nickname"></el-input>
          </el-form-item>

          <el-form-item prop="phone" size="small" label="电话号码">
            <el-input clearable v-model="userFormData.phone"></el-input>
          </el-form-item>

          <el-form-item prop="email" size="small" label="电子邮箱">
            <el-input clearable v-model="userFormData.email"></el-input>
          </el-form-item>

          <el-form-item prop="hobbies" size="small" label="兴趣爱好">
            <el-select
              style="min-width: 386px;"
              filterable
              default-first-option
              v-model="userFormData.hobbies"
              multiple :multiple-limit="5"
              placeholder="点击选择或输入搜索兴趣爱好（最多五项）"
            >
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="birthdate" size="small" label="出生日期">
            <el-date-picker default-value="2000-1-1" type="date" value-format="yyyy-MM-dd" placeholder="点击选择出生日期" v-model="userFormData.birthdate"></el-date-picker>
          </el-form-item>

          <el-form-item prop="sex" size="small" label="用户性别">
            <el-radio-group v-model="userFormData.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
              <el-radio :label="null">保密</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="height" size="small" label="身高(CM)">
            <el-input-number controls-position="right" v-model="userFormData.height" :min="54" :max="250"></el-input-number>
          </el-form-item>

          <el-form-item prop="weight" size="small" label="体重(KG)">
            <el-input-number controls-position="right" v-model="userFormData.weight" :min="40" :max="130"></el-input-number>
          </el-form-item>

          <el-form-item prop="remark" size="small" label="用户介绍">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="userFormData.remark"
              :rows="6"
              resize="none"
              placeholder="（限100字）"
            ></el-input>
          </el-form-item>

        </el-form>
      </div>
    </my-dialog>
  </el-col>
</el-row>
</el-main>

</template>

<script>
import myDialog from "@/components/MyDialog/index";
import myAvatar from '@/components/MyAvatarUpload'
import { editUserApi } from "@/api/user";
export default {
  components: {myDialog, myAvatar },
  props: {
    userInfo: {
      type: Object,
      require: true
    },
    categories: {
      type: Array,
      require: true
    }
  },
  data(){
    var checkPhone = (rule, value, callback) => {
      if(value){
          let rePhoneNum =  /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
          if(rePhoneNum.test(value)){
              callback();
          }else{
              callback(new Error('请输入正确的电话号码！'));
          }
      }else{
          callback();
      }
    };
    return{
      //编辑弹框属性
      userDialog: {
        title: "修改个人信息",
        width: 530,
        height: 554,
        visible: false,
      },
      userFormData: {
        id: "",
        nickname: "",
        sex: "",
        birthdate: "",
        height: "",
        weight: "",
        hobbies: "",
        remark: "",
        phone: "",
        email: "",
        checkEmail: "",
        version:"",
      },
      //检测邮箱是否更改
      preEmail:"",
      //编辑表单验证规则
      rules: {
        phone: [{ validator: checkPhone, trigger: 'blur' }],
        birthdate: [{ required: true, trigger: "blur", message: "请选择出生日期" }],
        email: [
          { required: true, trigger: "blur", message: "请填写电子邮箱" },
          { type: 'email', trigger: 'blur', message: '请输入正确的电子邮箱' }
        ],
      },
    }
  },
  methods:{
    editUser(data) {
      this.$resetForm("userFormRef", this.userFormData);
      //把当前要编辑的数据复制到数据域，tApi给表单回显
      this.$objCoppy(data, this.userFormData);
      //检测邮箱是否更改
      this.preEmail = this.userFormData.email;
      this.userDialog.visible = true;
    },
    //编辑确认
    onConfirm() {
      this.$refs.userFormRef.validate(async (valid) => {
        if (valid) {
          if(this.userFormData.hobbies != null){
            if(this.userFormData.hobbies !=''){
                this.userFormData.hobbies = this.userFormData.hobbies.toString();
            }else{
              this.userFormData.hobbies = null;
            }
          }
          //邮箱更改了自动解绑
          if(this.userFormData.email!=this.preEmail){
            this.userFormData.checkEmail = 0;
          }
          let res = await editUserApi(this.userFormData);
          if (res && res.code == 200) {
            //刷新列表
            this.$emit("refreshInfo");
            this.userDialog.visible = false;
            this.$message.success("修改个人信息成功！");
          }
        }
      });
    },
    //编辑取消
    onClose() {
      this.userDialog.visible = false;
      this.editNid = true;
    },
  },
  computed:{
    nidLabel(){
      if(this.userInfo.user.nid.length>=10){
        return '学号：'
      }
      return '工号：'
    },
    deptLabel(){
      if(this.userInfo.user.nid.length>=10){
        return '班级：'
      }
      return '部门：'
    },
    userBMI(){
      if(this.userInfo.user.weight!=null&&this.userInfo.user.height!=null){
        let BMI = (this.userInfo.user.weight / Math.pow((this.userInfo.user.height/100 ),2).toFixed(2)).toFixed(2);
        if(BMI > 32){
          return BMI+'-严重肥胖'
        }else if(BMI <= 32 && BMI >=28){
          return BMI+'-肥胖'
        }else if(BMI < 28 && BMI >=24){
          return BMI+'-超重'
        }else if(BMI < 24 && BMI >=18.5){
          return BMI+'-正常'
        }else if(BMI < 18.5 && BMI > 0){
          return BMI+'-偏瘦'
        }else{
          return '数据异常'
        }
      }
      return '-'
    },
    userHeight(){
      if(this.userInfo.user.height!=null){
        return this.userInfo.user.height+' cm'
      }
      return '-'
    },
    userWeight(){
      if(this.userInfo.user.weight!=null){
        return this.userInfo.user.weight+' kg'
      }
      return '-'
    },
  },
  filters: {
    chooseTagsColor(value){
      switch(value%3){
          case 0:
              return ''
          break;
          case 1:
              return 'success'
          break;
          case 2:
              return 'danger'
          break;
      }
    },
    getDateTime(val,flag){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = (month > 9) ? month : ("0" + month);
      day = (day < 10) ? ("0" + day) : day;
      let today = year + "-" + month + "-" + day;
      let nowDate = Date.parse(today);
      let birthDate = Date.parse(val);
      let diffDate = Math.abs(nowDate-birthDate);
      if(flag){
        let days = Math.floor(diffDate / (1000*3600*24));
        let msg;
        if(days<1){
          msg = "今日活跃"
        }else if(days>1&&days<=3){
          msg = "最近活跃"
        }else if(days>3&&days<=7){
          msg = "最近登录"
        }else if(days>7&&days<=31){
          msg = "一周前登录"
        }else if(days>31&&days<=62){
          msg = "一个月前登录"
        }else if(days>62&&days<=93){
          msg = "两个月前登录"
        }else if(days>93&&days<=365){
          msg = "三个月前登录"
        }else if(days>365){
          msg = "一年前前登录"
        }else{
          msg = "未曾登录"
        }
        return msg;
      }else{
        if(Math.floor(diffDate / (1000*3600*24*365))>0){
          return Math.floor(diffDate / (1000*3600*24*365)) + "岁";
        }else{
          return "-";
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

aside{
  background:none;
  padding-top:40px;
  .user-profile {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .user-other {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
        border-top: 1px solid #dfe6ec;
      }
  }

  .user-follow {
    padding-top: 20px;
  }

}

.box-center {
  margin: 0 auto;
  display: table;
  padding-top: 10px;
}

.text-muted {
  color: #777;
  text-indent: 2em;
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  i {
    padding-right: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 5px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      font-size: 16px;
    }

    .user-bio-section-body {
      .user-bio-section-item{
        i {
          margin-right: 6px;
        }
        span {
          font-weight: bold;
        }
        margin-bottom: 16px;
      }
    }

  }
}
</style>
